<script setup lang="ts">
import { reactive, ref } from 'vue'

const list = ref([
  { id: 1, name: '《红楼梦》', author: '曹雪芹' },
  { id: 2, name: '《西游记》', author: '吴承恩' },
  { id: 3, name: '《水浒传》', author: '施耐庵' },
  { id: 4, name: '《三国演义》', author: '罗贯中' }
])
const delBook = (id:number) => {
  list.value= list.value.filter((item,index)=>{
  return item.id != id
})
}
const bookInfo=reactive({
  id:0,
  name:'',
  author:''
})

const addBook = () => {
 bookInfo.id=Date.now()
//  list.value.push({...bookInfo})
list.value.push(Object.assign({},bookInfo))
}
</script>


<template>
  <div id="app">
    <h3>小黑的书架</h3>
    <div >书名:<input type="text" v-model="bookInfo.name"></div>
    <div >作者:<input type="text" v-model="bookInfo.author"></div>
    <button @click="addBook()">添加</button>
    <ul>
      <li v-for="(item,index) in list" :key="item.id">
        <span>{{ item.name }}</span>
        <span>{{ item.author }}</span>
        <button @click="delBook(item.id)">删除</button>
      </li>
    </ul>
  </div>
</template>